<template>
  <div id="bug-login" class="bg-color-black">
    <img src="../../images/login_bg.png" class="bgImg">
    <div class="login-box bg-color-gray">
      <span class="logo-tit"></span>
      <div class="input-box">
        <el-input class="user-name" v-model="userName" placeholder="请输入登录名" @change="changeUserName">
          <i slot="prefix" class="iconfont icon-person"></i>
        </el-input>
        <el-input class="pwd" v-model="pwd" type="password" placeholder="请输入密码" @change="changePwd" @keyup.enter.native="login">
          <i slot="prefix" class="iconfont icon-Password"></i>
        </el-input>
        <p class="login" :class="{ disabled: disabled }" @click="login">登录</p>
        <el-checkbox v-model="checked">记住我的账号</el-checkbox>
      </div>
    </div>
    <p class="copyright font12">© 2018 北京科蓝 京ICP备16027639号-1</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import { UserId, Password } from '../../assets/js/rules'
  import { nextPage } from '../../assets/js/index'
  import ajax from '../../api/ajax/ajax'
  import api from '../../api/url'
  import store from '../../store'
  export default {
    data () {
      return {
        userName: '',
        pwd: '',
        checked: false,
        disabled: false,
        appType: '',
        appOptionData: []
      }
    },
    methods: {
      changeUserName (val) {
        if (!UserId.test.test(val)) {
          this.$alert(UserId.message, '温馨提示')
        }
        this.userName = val
      },
      changePwd (val) {
        if (!Password.test.test(val)) {
          this.$alert(Password.message, '温馨提示')
        }
        this.pwd = val
      },
      login () {
        if (!this.disabled) {
          if (this.userName) {
            if (UserId.test.test(this.userName)) {
              if (this.pwd) {
                if (Password.test.test(this.pwd)) {
                  this.disabled = true
                  const paramsData = {
                    username: this.userName,
                    password: this.pwd
                  }
                  sessionStorage.setItem('userName', this.userName)
                  ajax.post(api.BUG_LOGIN, paramsData).then((res) => {
                    store.commit('updateusername', res.data.user_code)
                    if (this.checked) {
                      localStorage.setItem('userName', this.userName)
                      localStorage.setItem('checked', true)
                    } else {
                      localStorage.removeItem('userName')
                      localStorage.removeItem('checked')
                    }
                    nextPage('/home/bugIndex')
                  }).catch(req => {
                    this.disabled = false
                  })
                } else {
                  this.$alert(Password.message, '温馨提示')
                }
              } else {
                this.$alert('密码不能为空', '温馨提示')
              }
            } else {
              this.$alert(UserId.message, '温馨提示')
            }
          } else {
            this.$alert('用户名不能为空', '温馨提示')
          }
        }
      }
    },
    created () {
      this.userName = localStorage.getItem('userName')
      this.checked = Boolean(localStorage.getItem('checked'))
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #bug-login
    position fixed
    top 0
    left 0
    bottom 0
    right 0
    background #016DFB
    .bgImg
      position absolute
      bottom 0
      left 50%
      margin-left -510px
    .login-box
      width 420px
      padding 10px 0 40px 0
      position absolute
      top 50%
      left 50%
      margin-left -210px
      margin-top -20px
      transform translateY(-50%)
      .logo-tit
        display block
        height 150px
        width 300px
        margin 0 auto
        background url(./../../images/logo.png) no-repeat center center
      .title
        font-size 20px
        text-align center
        margin-top 40px
        margin-bottom 30px
      .input-box
        width 300px
        margin auto
        .el-input
          margin-bottom 20px
          .iconfont
            color #016DFB
            position relative
            top 7px
        .v-button
          margin-bottom 20px
          span
            font-size 16px
        .login
          line-height 44px
          text-align center
          background #016DFB
          color #fff
          border-radius 3px
          cursor pointer
          margin-bottom 20px
        .disabled
          background #a0cfff
          cursor not-allowed
    .copyright
      width 100%
      line-height 36px
      margin auto
      color #fff
      text-align center
      position absolute
      bottom 0
      left 0
    /*去除浏览器记住账号密码后的输入框背景色*/
    input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill
      -webkit-text-fill-color #606266 !important
      -webkit-box-shadow 0 0 0px 1000px transparent  inset !important
      background-color #fff
      background-image none
      transition background-color 50000s ease-in-out 0s //背景色透明  生效时长  过渡效果  启用时延迟的时间
    input
      background-color #fff
</style>
